<template>
    <div class="componentPage" v-loading="loading">
        <transition name="search">
            <v-form-render v-if="!loading&&!noJson"
                           :script="pageScript"
                           :form-json="formJson"
                           :form-data="formData"
                           :option-data="optionData">
            </v-form-render>
        </transition>
        <div v-if="noJson" class="noJson">页面无数据</div>
    </div>
</template>
<script>
import VFormRender from "../components/form-render/index.vue"
import * as api from "@/api/common"

export default {
    name: "ComponentPage",
    components: {VFormRender},
    data() {
        return {
            formJson: {},
            formData: {},
            optionData: {},
            loading: true,
            noJson: false,
            pageScript: {
                data: {},
                methods: {}
            },
        }
    },
    methods: {
        getSinglePage(r) {
            this.loading = true;
            const {meta: {pageId}} = r;
            api.detail({id: pageId}).then(res => {
                window.microApp.dispatch({loading: false})
                if (res.data.msg !== "暂无承载数据") {
                    const {json} = res.data.data;
                    if (json && json !== "{}" && json.length > 0) {
                        this.formJson = JSON.parse(json);
                        if (this.formJson.widgetList.length !== 0) {
                            this.initScript(this.formJson.pageScript)
                            this.noJson = false;
                        } else {
                            this.noJson = true;
                        }
                    } else {
                        this.noJson = true;
                    }
                } else {
                    this.noJson = true;
                }
                this.loading = false;
            })
        },
        initScript(s) {
            if (s.data) {
                this.pageScript.data = JSON.parse(s.data);
            }

            if (s.methods) {
                s.methods.forEach(item => {
                    let obj = {};
                    obj[item.funName] = new Function("arguments", item.funBody);
                    Object.assign(this.pageScript.methods, obj);
                })
            }
        }
    },

    watch: {
        "$route": {
            handler(r) {
                this.getSinglePage(r);
            },
            deep: true,
            immediate: true
        },
    }
}
</script>
<style scoped lang="scss">
.componentPage {
  width: 100%;
  margin: auto;
  background-color: white;
  min-height: 300px;
  height: 100%;
  position: relative;

  .noJson {
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 22px;
    font-weight: bold;
    width: 120px;
    height: 30px;
    line-height: 30px;
    text-align: center;
  }
}

.search-enter-active,
.search-leave-active {
  transition: all .4s;
}

.search-enter,
.search-leave-to {
  transform: translateY(-10px);
  opacity: 0;
}
</style>
